<template>
  <ul class="todo-main">
    <!--在这里将全部事件展示出来 列表渲染-->
    <li v-for="(item, index) in todos" :key="item.id">
      <label>
        <!--v-model:效果可以实现,真:勾选上 假:不勾选  如果你用v-model,你是在子组件当中直接修改父亲的数据  props只读的-->
        <input type="checkbox" :checked="item.done" @change="handler(item.id)"/>
        <span>{{ item.title }}</span>
      </label>
      <!--元素可以实现:显示|隐藏效果 v-if|v-show|动态行内样式-->
      <button class="btn btn-danger" v-show="item.done" @click="deleteTodo(item.id)" >删除</button>
    </li>
  </ul>
</template>

<script>
export default {
  name: "",
  //接受props写法:数组,对象 常用的是数组
  //子组件接受的props自定义属性,作为当前组件实例自身的属性！！！
  props: ["todos",'updateTodoDone','deleteTodo'],
  methods: {
      //表单元素复选框change事件[单机事件可以使用,但是表单元素很少点击事件一起使用]
      handler(id){
         //子组件调用父组件的方法修改父亲的数据
         this.updateTodoDone(id);
      }
  },
};
</script>

<style scoped>
</style>
